<template>
	<div id="orderDetail">
		<!-- 订单的收货人地址 -->
		<el-row>
		      <el-col :span="6">
				   <el-timeline>
				      <el-timeline-item
				        v-for="(activity, index) in activities"
				        :key="index"
				        :icon="activity.icon"
				        :type="activity.type"
				        :color="activity.color"
				        :size="activity.size"
				        :hollow="activity.hollow"
				        :timestamp="activity.timestamp"
				      >
				        <span v-if="activity.timestamp != null">{{ activity.content }}</span>
				      </el-timeline-item>
				    </el-timeline>
			  </el-col>
			  <el-col :span="18">
					<el-row>
						<el-col :span="6">
							<h3>下单成功</h3>
						</el-col>
					</el-row>
					 <el-row>
					     <el-col :span="8">下单时间：{{order.created_at}}</el-col>
					 	<el-col :span="8">
					 		订单号：{{order.sn}}
					 	</el-col>
					 </el-row>
					 <el-row>
					 	<el-col :span="6">
					 		<h3>收货人信息</h3>
					 	</el-col>
					 </el-row>
					 <el-row>
					     <el-col :span="8">收货人：<span v-if="order.order_address">{{order.order_address.name}}</span></el-col>
					 	<el-col :span="8">
					 		收货人手机号：<span v-if="order.order_address">{{order.order_address.mobile}}</span>
					 	</el-col>
					 </el-row>
					 <el-row>
					    <el-col :span="8">收货地址： <span v-if="order.order_address">{{order.order_address.address}}</span></el-col>
					 </el-row>
			  </el-col>
		</el-row>
		
		 <el-table :data="order.order_products" stripe style="width: 100%">
		    <el-table-column prop="name" label="产品名" width="180" />
		    <el-table-column prop="image" label="图片" width="180">
				<template #default="scope">
					<el-image :src="scope.row.image" />
				</template>
			</el-table-column>
		    <el-table-column prop="price" label="价格" />
			<el-table-column prop="num" label="数量" />
			<el-table-column prop="spec_info" label="规格" />
		  </el-table>
		<!-- 订单的产品 -->
	</div>
</template>

<script setup>
	import { ref,reactive, onMounted,computed } from 'vue'
	import {useRouter,useRoute} from 'vue-router';
	import {getOrderDetail} from '../../api/order.js';
	import { MoreFilled } from '@element-plus/icons-vue'
	const route = useRoute();
	const order = ref({});
	const activities = computed(()=>{
		return [
			{
				content:"下单成功",
				size: 'large',
				type: 'primary',
				timestamp:order.value.created_at,
			},
			{
				content:"订单发货",
				size: 'large',
				color: '#0bbd87',
				timestamp:order.value.send_time
			},
			{
				content:"买家提货",
				size: 'large',
				timestamp:order.value.take_time
			}
			
		];
		
	});
	onMounted(()=>{
		let id = route.query.id;
		getOrderDetail({id:id}).then(res=>{
			order.value = res.data;
		})
	})
</script>

<style>
</style>